<template>
  <view class="">
    <u-popup :customStyle="{background: 'transparent'}" :safeAreaInsetBottom="false" :show="isShow" mode="center"
             @close="close">
      <view class="wrap">
        <image class="close" mode="" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/close.png"
               @click="close"></image>
        <!-- <image class="bg" mode="widthFix" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/juben.png"></image> -->
        <!-- <image class="bg" mode="widthFix" :src="obj.playImg"></image> -->
        <view class="bg">
          <image :src="obj.playImg" class="image" mode="widthFix" style="width: 640rpx; height: 800rpx;"></image>
          <view class="text">{{ obj.playText }}</view>
        </view>

        <!--  -->
        <view v-if="false" class="btns">
          <!-- 待签到 -->
          <image class="btn" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/dqd-btn.png"
                 @click="onSignIn"></image>
          <!-- 已签到 -->
          <!-- <image class="btn" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/yqd-btn.png"></image> -->

          <!-- 开始任务 - 灰 -->
          <!-- <image class="btn" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/ksrw-h-btn.png"></image> -->
          <!-- 开始任务 -->
          <!-- <image class="btn" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/ksrw-btn.png"></image> -->
          <image class="btn" src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/ksrw-btn.png"
                 @click="toUrl('/pages/challenge/quest1')"></image>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isShow: false,
    }
  },
  props: {
    obj: {
      type: Object,
      default: {},
    }
  },
  methods: {
    toUrl(url) {
      if (!url) return
      uni.navigateTo({
        url
      })
    },
    show() {
      this.isShow = true;
    },
    close() {
      this.isShow = false;
      this.$emit('close', {
        result: this.result,
      })
    },
    submit() {
      this.close();
    },
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 640rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  .close {
    position: absolute;
    width: 80rpx;
    height: 80rpx;
    top: 0;
    right: 0;
    z-index: 99;
    transform: translate(50%, -50%);
  }
}

.bg {
  width: 100%;
  height: 100%;
  position: relative;

  .image {
    width: 100%;
  }

  .text {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    z-index: 1;
  }
}

.btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50rpx;

  .btn {
    width: 300rpx;
    height: 80rpx;
  }
}
</style>
